<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
	<title>List of questions</title>

	<link type="text/css" rel="stylesheet" href="styles/cupertino/skin.css" />
	<link type="text/css" rel="stylesheet" href="styles/common.css"/>

</h:head>

<h:body>
		
		<h:form id="formAsk">

		<p:fieldset legend="Ask the question" toggleable="true"
			toggleSpeed="500" collapsed="true"			
			onToggleUpdate="growl">


			<h:panelGrid id="gridQuestion" columns="3">

				<h:outputLabel value="Question text: *" />
				<h:inputText id="queText" required="true" style="width:300px"
					value="#{questionListBean.question.txt}">
					<f:validateLength minimum="6" />
				</h:inputText>
				<p:message for="queText" />
			</h:panelGrid>
			
			<h:panelGrid id="gridAnsw" columns="2">

				<p:dataTable var="answ" value="#{questionListBean.question.answers}"
					id="answList">

					<f:facet name="header">  
			            Answers (options)  
			        </f:facet>


					<p:column headerText="Text" style="width:300px">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{answ.txt}" />
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{answ.txt}" style="width:100%" />
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="Edit">
						<p:rowEditor />
					</p:column>

					<p:column>
						<f:facet name="header">
							<h:outputText value="Operation" />
						</f:facet>
						<p:commandButton value="Add"
							action="#{questionListBean.newAnswer}" update="formAsk:gridAnsw">
							<p:collector value="#{questionListBean.answer}"
								addTo="#{questionListBean.question.answers}" />
						</p:commandButton>
             						
						<p:commandButton value="Remove"
							update="formAsk:gridAnsw">
							<p:collector value="#{answ}"
								removeFrom="#{questionListBean.question.answers}" />
						</p:commandButton>

					</p:column>

				</p:dataTable>

			</h:panelGrid>
			
			
			<p:commandButton value="Submit"
				update="formAsk:gridQuestion,formAsk:gridAnsw, formList:questions" 
				action="#{questionListBean.saveQuestion}"/>

		</p:fieldset>
			
		</h:form>

		<h:form id="formList">

		<p:dataGrid id="questions" var="qstn"
			value="#{questionListBean.questions}" columns="1" rows="5"
			paginator="true" effect="true"
			paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {PageLinks} {NextPageLink}">

			<p:column>
				<p:panel header="#{qstn.txt}" style="text-align:center">
					<h:panelGrid columns="2" style="width:100%">
						<p:graphicImage value="#{qstn.chartUrl}" />

						<p:dataTable var="ans" value="#{qstn.answers}">
							<p:column>
								<f:facet name="header">  
							                    answer  
							            </f:facet>
								<h:outputText value="#{ans.txt}" />
							</p:column>

							<p:column>
								<f:facet name="header">  
							                    pop  
							    </f:facet>
								<h:outputText value="#{ans.pop}" />
							</p:column>

							<p:column style="width:70px">
								<p:commandButton value="vote!"
									action="#{questionListBean.vote}" rendered="#{!qstn.voted}" update="formList:questions">
									
									<f:setPropertyActionListener value="#{qstn}"
										target="#{questionListBean.selectedQuestion}" /> 
									<f:setPropertyActionListener value="#{ans}"
										target="#{questionListBean.selectedAnswer}" />  
								</p:commandButton>
						
							</p:column>

							<f:facet name="footer">  
							            In total there are #{qstn.pop} votes  
							</f:facet>
						</p:dataTable>
						
					</h:panelGrid>
				</p:panel>
			</p:column>

		</p:dataGrid>

		</h:form>

</h:body>
</html>